<template>
  <TopBar>
    <template v-slot:back>
      <span class="back iconfont" >&#xe6f2;</span>
    </template>
    <template v-slot:title>
      <p>新建收货地址</p>
    </template>
    <template v-slot:text>
      <router-link to="/myAddress">
        <span class="text" @click="createAddress">保存</span>
      </router-link>
    </template>
  </TopBar>
  <div class="wrapper">
    <div class="container">
      <div class="item">
        <span>所在城市：</span>
        <input type="text" placeholder="如北京市" v-model="city" />
      </div>
      <div class="item">
        <span>小区/大厦/学校：</span>
        <input
          type="text"
          placeholder="如理工大学国防科技园"
          v-model="department"
        />
      </div>
      <div class="item">
        <span>楼号-门牌号：</span>
        <input type="text" placeholder="A号楼B层" v-model="houseNumber" />
      </div>
      <div class="item">
        <span>收货人：</span>
        <input type="text" placeholder="请填写收货人的姓名" v-model="name" />
      </div>
      <div class="item">
        <span>联系电话：</span>
        <input type="text" placeholder="请填写收货手机号" v-model="phone" />
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "../../components/TopBar";
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import { post } from "../../utils/request";

// 点击回退逻辑
const useBackRouterEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  return handleBackClick;
};
//新建地址
const createAddressEffect = () => {
  const router = useRouter();
  const data = reactive({
    name: "",
    phone: "",
    city: "",
    department: "",
    houseNumber: "",
  });
  const createAddress = async () => {
    if (
      data.name != "" &&
      data.phone != "" &&
      data.city != "" &&
      data.departmen != "" &&
      data.houseNumber != ""
    ) {
      const result = await post("/api/user/address", {
        name: data.name,
        phone: data.phone,
        city: data.city,
        department: data.department,
        houseNumber: data.houseNumber,
      });
      // console.log(result);
      if (result?.errno === 0) {
        console.log(1);
        router.push({ name: "MyAddress" });
      }
    }else{
      alert('请填写完整信息')
    }
  };
  const { name, phone, city, department, houseNumber } = toRefs(data);
  return { name, phone, city, department, houseNumber, createAddress };
};
export default {
  name: "EditAddress",
  components: { TopBar },
  setup() {
    const handleBackClick = useBackRouterEffect();
    const {
      name,
      phone,
      city,
      department,
      houseNumber,
      createAddress,
    } = createAddressEffect();
    return {
      handleBackClick,
      name,
      phone,
      city,
      department,
      houseNumber,
      createAddress,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
a {
  text-decoration: none;
}
.top {
  .back {
    font-size: 0.16rem;
    color: #b6b6b6;
  }
  p {
    flex: 1;
    font-size: 0.16rem;
    text-align: center;
    color: #333;
  }
  .text {
    font-size: 0.14rem;
    color: #333;
  }
}
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0;
  right: 0;
  padding: 0.18rem 0;
  background-color: $content-bgColor;
  .container {
    .item {
      box-sizing: border-box;
      border-bottom: 0.01rem solid #f1f1f1;
      display: flex;
      align-items: center;
      height: 0.45rem;
      background: #fff;
      padding: 0 0.18rem;
      span {
        font-size: 14px;
        color: #666666;
        line-height: 0.45rem;
      }
      input {
        flex: 1;
        height: 0.2rem;
        border: none;
        outline: none;
        &::placeholder {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }
}
</style>